<template>
  <a-drawer
    width="100%"
    placement="right"
    :visible="visible"
    :closable="false"
    :bodyStyle="drawer.bodyStyle"
    @close="cancel"
  >
    <div
      style="display: flex; align-items: flex-start; justify-content: center"
    >
      <div class="tab-add title" style="cursor: pointer">
        <label class="text-bold">
          <a-tooltip title="关闭">
            <a-icon
              @click="cancel"
              type="arrow-left"
              style="cursor: pointer"
            ></a-icon>
          </a-tooltip>
          正在编辑表单:</label
        >

        <a-tooltip :title="title">
          <span class="">{{ title }}</span>
        </a-tooltip>
      </div>

      <div style="width: 100%">
        <a-tabs
          :default-active-key="tabkey"
          v-model="tabkey"
          @change="tabChange"
          @tabClick="tabClick"
        >
          <a-tab-pane key="1" tab="编辑字段"> </a-tab-pane>
          <a-tab-pane key="2" tab="流程设计" v-if="agile.useType == 2">
          </a-tab-pane>
          <a-tab-pane key="3" tab="公开发布"> </a-tab-pane>
          <template slot="tabBarExtraContent">
            <a-tooltip title="关闭">
              <a @click="cancel" style="color: #ff4d4f; padding-right: 10px">
                <a-icon type="close" />
                <span>关闭</span>
              </a>
            </a-tooltip>
          </template>
        </a-tabs>
      </div>
    </div>
    <div v-show="tabkey == 1">
      <a-spin :spinning="spinning">
        <form-desinger
          ref="formdesinger"
          v-if="desinger.form.visible"
          :title="title"
          :configId="form.configId"
          :fromApp="true"
        ></form-desinger>
      </a-spin>
    </div>
    <div v-if="tabkey == 2">
      <workflow-desinger
        v-if="tabkey == 2"
        ref="workflowdesinger"
        :title="agile.name"
        :processId="menuId"
        :agile="agile"
      ></workflow-desinger>
    </div>
  </a-drawer>
</template>
    
<script>
import { findByMenuId } from "@/services/system/agile/app/desinger";
import formDesinger from "@/pages/system/agile/form/desinger";
import workflowDesinger from "@/pages/workflow/process/desinger";
export default {
  name: "appdesinger",
  components: { formDesinger, workflowDesinger },
  data() {
    return {
      tabkey: "1",
      height: {
        edit: window.innerHeight - 26,
      },

      form: {
        configId: "",
        name: "",
      },

      desinger: {
        form: {
          visible: false,
        },
      },
      drawer: {
        bodyStyle: {
          padding: "0",
        },
      },
      spinning: false,
      wokflow: {},
      agile: {
        configId: "",
        name: "",
        icon: "",
        theme: "",
        useType: 1,
      },
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    menuId: {
      type: String,
    },
    title: {
      type: String,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * 选项卡切换
     */
    tabClick() {
      if (this.tabkey == "1") {
        this.$refs.formdesinger.save();
      }
      if (this.tabkey == "2") {
        this.$refs.workflowdesinger.save();
      }
    },
    /**
     *
     * @param {*} activeKey
     */
    tabChange(activeKey) {
      //保存
    },

    init() {
      let that = this;
      findByMenuId({ menuId: this.menuId, configType: 2 }).then(function (
        result
      ) {
        if (result.code === that.eipResultCode.success) {
          that.agile = result.data[0];
          that.form.configId = that.agile.configId;
          that.desinger.form.visible = true;
        } else {
          that.$message.error(result.msg);
        }
        that.spinning = false;
      });
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
    
    <style lang="less" scoped>
/deep/ .form-designer-container-9136076486841527 {
  height: calc(100vh - 48px) !important;
}
/deep/ .ant-tabs-bar {
  margin: 0;
}
.tab-add {
  width: 60%;
  line-height: 24px;
  padding: 12px 10px 7px 10px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}
.title {
  font-size: 16px;
}
</style>
    